<div class="bg-light lter b-b wrapper-md ng-scope">
    <h4 class="m-n font-thin">模块管理</h4>
</div>
<div class="wrapper-md" ng-controller="shopTemplateCtrl">
    <div class="panel pos-rlt">

        <!-- left tool -->
        <div class="left-tool-box text-muted">
            <div class="pull-left bg-dark h-full">
                <div class="text-center tool-box-item-it bg-ac-dark">
                    <i class="icon-social-dropbox"  popover-placement="top" popover="工具" popover-trigger="mouseenter"></i>
                </div>
            </div>
            <div class="pull-left b-l b-3x border-left-dark h-full bg-dark padder-v" ng-if="hide">
                <div>
                    <div class="text-left tool-box-item ">
                        <span class="block m-b-sm">导航块</span>
                        <ul class="tool-box-item-info m-n">
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(0,0)">
                                <i class="glyphicon glyphicon-th-large"  popover-placement="top" popover="一行多个" popover-trigger="mouseenter"></i>
                            </li>
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(0,1)">
                                <i class="fa  fa-ellipsis-h"  popover-placement="top" popover="四列多行" popover-trigger="mouseenter"></i>
                            </li>
                        </ul>
                    </div>
                    <div class="text-left tool-box-item">
                        <span class="block m-b-sm">广告</span>
                        <ul class="tool-box-item-info m-n">
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(1,0)">
                                <i class="fa fa-stop"></i>
                            </li>
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(1,1)">
                                <i class="fa   fa-ellipsis-h"></i>
                            </li>
                        </ul>
                    </div>
                    <div class="text-left tool-box-item ">
                        <span class="block m-b-sm">商品</span>
                        <ul class="tool-box-item-info m-n">
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(2,0)">
                                <i class="fa  fa-reorder fa-rotate-90"></i>
                            </li>
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(2,1)">
                                <i class="fa   fa-ellipsis-h"></i>
                            </li>
                        </ul>
                    </div>
                    <div class="text-left tool-box-item ">
                        <span class="block m-b-sm">字体</span>
                        <ul class="tool-box-item-info m-n">
                            <li class="tool-box-if-box bg-light block pull-left m-r-sm r-2x m-b-sm" ng-click="addBox(3,0)">
                                <i class="fa  fa-font"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="arrow-btn hide-btn" ng-class="{false:'show-btn',true:'hide-btn'}[hide]" ng-click="hide=!hide"></div>
        </div>

        <div class="text-center m-b-sm">
            <!--  content -->
            <div class="panel-body">
                <div class="padder-v inline text-left">
                    <div class="phone-header"></div>

                    <!-- template_content -->
                    <div class="tc-con b-a">
                        <div class="m-n" ui-sortable="sortableOptions" ng-model="templates">
                            <div ng-repeat="item in templates track by $index">
                                <div class="b-light text-center pos-rlt square-container" ng-class="{true:'square-container-active'}[item.active]" ng-click="changeBox($index);">
                                    <!-- square -->
                                    <div class="square square-l-t"></div>
                                    <div class="square square-r-t"></div>
                                    <div class="square square-l-m"></div>
                                    <div class="square square-l-b"></div>
                                    <div class="square square-r-b"></div>
                                    <div class="square square-r-m"></div>
                                    <div class="square square-m-t"><i class="text-white h6">+</i></div>
                                    <div class="square square-m-b"><i class="text-white h6">+</i></div>

                                    <!-- cancel button -->
                                    <div class="square square-cancel"><i class="fa fa-times" ng-click="delBox(item,$event)"></i></div>

                                    <!-- 导航块 -->
                                    <div data-ng-include=" 'tpl/shop/shop_template_navigation.html'"  ng-if="item.type==0"></div>

                                    <!-- 广告块 -->
                                    <div data-ng-include="'tpl/shop/shop_template_advertisement.html'"  ng-if="item.type==1"></div>

                                    <!-- 商品块 -->
                                    <div data-ng-include=" 'tpl/shop/shop_template_goods.html'"  ng-if="item.type==2"></div>

                                    <!-- 字体块 -->
                                    <div data-ng-include=" 'tpl/shop/shop_template_font.html'"  ng-if="item.type==3"></div>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
            <div class="text-center">
                <button class="btn btn-success btn-sm" ng-click="add()">保存</button>
            </div>
        </div>

    </div>
</div>
